<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>web13</title>
		<link href="css/trontastic/jquery-ui-1.10.0.custom.css" />
		<link href="js/jquery-1.9.0.js">
		<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
		<script src="js/jquery-1.9.0.js"></script>
		<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
		<style>
			#draggable, #resizable{ width:200px; height:100px;
						border-width: 1px;
						border-style: solid;
						border-color: black;
						display: block;
			}
			#droppable{ width:300px; height:200px;
						border-width: 1px;
						border-style: solid;
						border-color: black;
						display: block;
			}
			#selectable .ui-selecting{
				background-color: yellow;
			}
			#selectable .ui-selected{
				background-color: blue;
			}
			.ui-progressbar .ui-progressbar-value{
				
			}
			.red { background-color: red}
			.white { background-color: white}
		</style>
		<script>
			$(function(){
				/* 어떤 대상에 .resizable() 메서드를 걸면
				 * 그 대상에 jQuery ui 클래스가 붙습니다.
				 * 그 클래스에는 클릭할때, 마우스누를때, 뗄때마다 
				 * 붙는 class가 달라집니다.
				 */
				$("#resizable").resizable();
				$("#draggable").draggable();
				$("#droppable").droppable({
					drop: function( event, ui){
						$("#droppable").text(event+""+ui);
					}
				});
				$("#selectable").selectable();
				$("#accordion").accordion();
				var data=["apple", "airplane", "africa"];
				$("input:text"[name='autocomplete']).autocomplete({
					source : data
				});
				$("[name='datepicker']").datepicker({
					changeMonth: true,	// { 옵션을 줄때 사용 속성:값, 속성:값..}
					changeYear: true
				});
				$("#progressbar").progressbar({
					value: 30
				});
				$("#slider").slider({ value: 80});
				$("#spinner").spinner();
				$("#tabs").tabs({});
				$(document).tooltip();

				var clicked=false;
				$("textarea").click(function(){
					clicked=!clicked;
					if(clicked) $(this).addClass("red",1000, function(){
						$(this).addClass("white",1000);
					});
					else        $(this).removeClass("red",1000,function(){
						$(this).removeClass("red",1000);
					});
				})
				// {}에 주는 옵션들이 1초동안 적용됩니다.
				$("#ani").click(function(){
 					$("#ani").animate({
 						"background-color": "#ff0022",
 						"font-size": "3em",
 						"color": "white",
 						"height": "100px"
 					}, 1000);
				})
				$("#image").click(function(){
				options = { to: { width: 1400, height: 1400}};
				$(this).effect("shake", options, 1000, function(){
					$(this).effect("explode", options, 1000, function(){});
				});
			})
		})
		</script>
	</head>
	<body>
		<h5> fresco Image show plugin </h5>
		<a href="http://t2.gstatic.com/images?q=tbn:ANd9GcSTfGFilM0vATA3dAw0WTzNTM2Z44xYsIRr3P49TAFc5gmbENBq">
			show image;
		</a>
		<a href="http://t3.gstatic.com/images?q=tbn:ANd9GcQVJW4vG1NqYojsCSiHngT8VRr1sIs6xMLPiNHkknpGzpouehw4Gg">
			show image;
		</a>
		<h5> jQuery UI는 UI의 모음집 </h5>
		<img id="image" width="50" src="shoes.jpg">
		<div style="height:50px; background-color: #7777ff;" id="ani">
			.animate({ 속성: 값 , 속성: 값....}, 시)
		</div>
		<textarea rows="10" cols="10"> Add Class effect </textarea>
		tooltip : <input type="text" title="이름을 쓰세요" />
				  <input type="text" title="사는 지역을 쓰세요" />
		tabs
		<div id="tabs">
			<ol>
				<li><a href="#tab1"> 탭1 </a></li>
				<li><a href="#tab2"> 탭2 </a></li>
				<li><a href="#tab3"> 탭3 </a></li>
			</ol>
			<div id="tab1"> 탭1의 본문 </div>
			<div id="tab2"> 탭2의 본문 </div>
			<div id="tab3"> 탭3의 본문 </div>
		</div>
		spinner <input type="text" id="spinner"/>
		slider <div id="slider"> </div>
		progressbar <div id="progressbar"> </div>
		datepicker <input type="text" name="datepicker" />
		autocomplete <input type="text" name="autocomplete" />
		<div id="accordion">
			<h3> 피아노 </h3>
			<div> 바이엘, 체르니, ... </div>
			<h3> 기타 </h3>
			<div> 일렉기타, 통기타, ... </div>
			<h3> 드럼 </h3>
			<div> DRUM, BONGO, ... </div>
		</div>
		<ol id="selectable">
			<li> first </li>
			<li> second </li>
			<li> third </li>
			<li> 눌러보세요 </li>
		</ol>
		<div id="draggable" class="div-widget-content">
			<p>1.draggable div-widget-content
				는 css파일에 선언되어 있습니다.</p>
		</div>
		<div id="droppable" class="ui-widget-content">
			<p>2. droppable 이쪽으로 끌어다 놓으세요</p>
		</div>
		<div id="resizable" class="div-widget-content">
			<p>3. resizable 크기를 조절하세요</p>
		</div>
	</body>
</html>

